<template>
  <view class="content">
    <view class="content-header">
      <!-- <image src="goods.prizeAvatar" mode=""></image> -->
      <image src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image>
    </view>
    <view class="banner-box">
      <view style="width: 100%; height: 150px; background-color: #007AFF; background: url(https://small.qaqavr.com/img/zhongrui/bannerbg.png) no-repeat; background-size: cover;box-sizing: border-box;padding: 20rpx;">
        <!-- <image src="../../static/bannerbg.png" style="width: 100%; height: 100%;" mode=""></image> -->
        <!-- 头像 -->
        <view style="width: 100%; height: 100rpx; display: flex;justify-content: center;align-items: center;">
          <view style="width: 100rpx; height: 100rpx; border-radius: 50%; overflow: hidden;"><image :src="user.avatarUrl" style="width: 100%; height: 100%;" mode=""></image></view>
        </view>
        <!-- 昵称 -->
        <view
          style="width: 100%; height: 30rpx; display: flex;justify-content: center;align-items: center; margin-top: 10rpx; color: #FFFFFF;font-family: SimHei;font-weight: 400;">
          {{ user.realName }}
        </view>
        <!-- 奖励 -->
        <view style="width: 100%; height: 100rpx; display: flex;justify-content: space-between;align-items: center;">
          <view style="width: 200rpx; display: flex;  flex-direction: column;  justify-content: space-between;align-items: center;">
            <view style="font-size: 36rpx;  font-family: SimHei;font-weight: bold;color: #FDFDFD;">101</view>
            <view style="font-size: 24rpx;font-family: SimHei;font-weight: 400;color: #FDFDFD;">推荐成功人数</view>
          </view>
          <view style="width: 200rpx;  display: flex;  flex-direction: column;  justify-content: space-between;align-items: center;">
            <view style="font-size: 36rpx;  font-family: SimHei;font-weight: bold;color: #FDFDFD;">12000</view>
            <view style="font-size: 24rpx;font-family: SimHei;font-weight: 400;color: #FDFDFD;">推荐奖金 (元)</view>
          </view>
        </view>
      </view>
      
      <view style="width: 100%;">
        <uni-table stripe emptyText="暂无更多数据" >
          <uni-tr>
            <uni-th  align="center">排名</uni-th>
            <uni-th  align="center">微信昵称</uni-th>
            <uni-th  align="center">推荐成功人数</uni-th>
            <uni-th  align="center">预计奖金(元)</uni-th>
           
          </uni-tr>
          <uni-tr v-for=" (item,index) in list" :key="index">
            <uni-td  align="center">{{index+1}}</uni-td>
            <uni-td  align="center">{{item.realName}}</uni-td>
            <uni-td  align="center">{{item.successNum}}</uni-td>
            <uni-td  align="center">{{item.bonus}}</uni-td>
            
          </uni-tr>
        </uni-table>
      </view>
      
     
    </view>
    
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      user: {}
    };
  },
  onLoad() {
    this.getlist();
    this.user = uni.getStorageSync('userinfo');
    console.log('ososo==>', this.user);
  },
  methods: {
    async getlist() {
      const { data } = await uni.$http.get('/sign/recommendedRanking');

      if (data.statusCode !== 200) {
        return;
      } else {
        this.list = data.data;
        console.log('推荐===>', this.list);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  .content-header {
    height: 300rpx;
    // background-color: #f7f7f7;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .banner-box {
    position: absolute;
    top: 50rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 800rpx;
  }
  /deep/.uni-table-th {
    font-size: 24rpx;
    padding: 20rpx 5rpx;
  }
}
</style>
